<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			{{emp}}
			<hr />
			<form>
				用户名: <input type="text" v-model="emp.username" /> <br /> 
				密码: <input type="password" v-model="emp.password" /> <br /> 性别:
				<input type="radio" v-model="emp.sex" value="男" /> 男
				<input type="radio" v-model="emp.sex" value="女" /> 女
				<br /> 爱好:
				<input type="checkbox" v-model="emp.hobby" value="照相" />照相
				<input type="checkbox" v-model="emp.hobby" value="爬山" />爬山
				<input type="checkbox" v-model="emp.hobby" value="旅游" />旅游
				<input type="checkbox" v-model="emp.hobby" value="动漫" />动漫
				<br />
				<select v-model="emp.city">
					<option value="0">--请选择--</option>
					<option value="sz">深圳</option>
					<option value="sh">上海</option>
					<option value="gz">广州</option>
				</select>
				<br /> 出生日期
				<input type="date" v-model="emp.bornDate" />
				<button type="button" @click="reg(emp)">注册</button>
			</form>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					emp: {
						username: "",
						password: "",
						sex: "男",
						hobby: ["动漫"],
						city: "0",
						bornDate: "2023-01-01"
					}
				},
				methods:{
					reg(emp){
						console.log(emp)
					}
				},
				/* 用于代替加载函数使用的钩子函数 */
				mounted:function(){
					alert(111);
				}
			})
		</script>
	</body>

</html>